<template>
  <div class="project zy-content">
    <div class="title">
      <span>配置精度检测项目</span>
      <div class="icon">
        <span class="creatBtnright" @click="createfaultCodeShowH" v-if="checkBtnPermission.dcmAcctestItemAdd">
          <span><Icon type="ios-add-circle-outline" color="#187BDB" /></span>
          <span class="rightbtn">新增检测项目</span>
        </span>
<!--        <span class="creatBtnright" @click="batchImport">-->
<!--          <span><Icon type="ios-cloud-upload-outline" color="#187BDB"/></span>-->
<!--          <span class="rightbtn">{{$t('common.Import')}}</span>-->
<!--        </span>-->
<!--        <span class="creatBtnright" @click="exportProject">-->
<!--          <span><Icon type="ios-cloud-download-outline" color="#187BDB" /></span>-->
<!--          <span class="rightbtn">导出检测项目</span>-->
<!--        </span>-->
      </div>
    </div>
    <div class="searchBox">
      <Tabs @on-click="tabsClick" class="tab">
        <TabPane label="待确认">
          <!--        <waitConfirmed :waitTotal="total" :dataSource="dataSource"></waitConfirmed>-->
        </TabPane>
        <TabPane label="已确认">
          <!--          <confirmed></confirmed>-->
        </TabPane>
      </Tabs>
      <Form label-position="right" :label-width="130" class="search-form">
        <Row>
          <Col span="5">
            <FormItem label="设备类别：">
              <Select
                      v-model="searchParams.categoryId"
                      filterable
                      clearable
                      :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                        v-for="(item) of category"
                        :value="item.value"
                        :key="item.value"
                >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="检测项目：">
              <Input
                      type="text"
                      v-model="searchParams.itemProject"
                      :placeholder="`${$t('common.inputInfo')}`"
                      class="inputBorder"
                      :maxlength="32"
              ></Input>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="检测周期：">
              <Select
                      v-model="searchParams.triggerCycle"
                      filterable
                      clearable
                      :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                        v-for="(item, index) of cycle"
                        :value="item.key"
                        :key="index"
                >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5" style="display: flex; justifyContent: space-around">
            <Button type="primary" @click="changeNum" v-if="checkBtnPermission.dcmAcctestItemList">{{$t('common.Query')}}</Button>
            <Button type="primary" shape="circle" @click="handleBatchConfirm" v-if="delIds.length && status == 0 && checkBtnPermission.dcmAcctestItemBatchVerify">批量确认</Button>
            <Button type="primary" shape="circle" @click="handleBatchDelete" v-if="delIds.length && checkBtnPermission.dcmAcctestItemBatchDelete">批量删除</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table
              ellipsis
              ref="selection"
              :columns="status == 1 ? columns : otherColumns"
              :data="data"
              @on-selection-change="onSelectChange"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" v-if="status == 0 && checkBtnPermission.dcmAcctestItemVerifyById" @click="confirm(row)">{{$t('maintenance.Confirmed')}}</span>
          <span class="operationBtn" @click="edit(row)" v-if="checkBtnPermission.dcmAcctestItemEdit">{{$t('common.Edit')}}</span>
          <span class="operationBtn" @click="deleteRow(row)" v-if="checkBtnPermission.dcmAcctestItemDelete">{{$t('common.Delete')}}</span>
        </template>
      </Table>
    </div>
    <div class="pageWrap">
      <Page
              :total="total"
              :page-size="pageSize"
              :page-size-opts="$variable.pageSizes"
              :current="pageNum"
              @on-change="changePageNum"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total

      />
    </div>
    <addModal ref="addProjectModal" @handleSearch="handleSearch"></addModal>
    <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="`${$t('maintenance.Deleteremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span
          >删除后不会影响已经生成的检测任务，但不会继续生成任务，是否确认删除？</span
          >
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" :loading="delLoading" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="delBatchFaultCodeShowF" :title="`${$t('maintenance.Deleteremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span
          >删除后不会影响已经生成的检测任务，但不会继续生成任务，是否确认删除？</span
          >
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delBatchFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" :loading="delBatchLoading" @click="deleteBatchOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/pair.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span>确认后检测项目生效，是否确认？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="confirmFaultCodeShowF = false"
        >{{$t('common.Cancle')}}</Button
        >
        <Button type="primary" :loading="confirmLoading" @click="deleteConfirmOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="confirmBatchFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/pair.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span>确认后检测项目生效，是否确认？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="confirmBatchFaultCodeShowF = false"
        >{{$t('common.Cancle')}}</Button
        >
        <Button type="primary" :loading="confirmBatchLoading" @click="deleteBatchConfirmOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
            v-model="importVisible"
            width="500"
            :title="`${$t('common.Import')}`"
            class="batchImport"
            @on-ok="importOk"
            @on-cancel="importCancel"
    >
      <div class="import">
        <span class="selectFile">请选择文件</span>
        <Upload action="//jsonplaceholder.typicode.com/posts/">
          <Button icon="ios-cloud-upload-outline">选择文件上传</Button>
        </Upload>
      </div>
      <div class="download">
        <span class="clickthis">点击此处</span><span>下载模板。</span>
      </div>
    </Modal>
  </div>
</template>

<script>
import waitConfirmed from './modal/waitConfirmed.vue'
import confirmed from './modal/confirmed.vue'
import addModal from './modal/addModal'
export default {
  name: 'accuracyProject',
  components: {
    waitConfirmed,
    confirmed,
    addModal
  },
  data() {
    return {
      status: 0,
      confirmId: '',
      delId: '',
      searchParams: {},
      checkBtnPermission: {},
      total: 0,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      importVisible: false,
      allCheck: false,
      create: false,
      confirmBatchFaultCodeShowF: false,
      confirmBatchLoading: false,
      confirmFaultCodeShowF: false,
      confirmLoading: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      delLoading: false,
      delBatchFaultCodeShowF: false,
      delBatchLoading: false,
      formItem: {},
      delIds: [],
      classification: [
        { name: "CNC", key: "CNC" },
        { name: "PLC", key: "PLC" },
        { name: "IPC", key: "IPC" },
      ],
      category: [],
      period: [
        { name: "月度", key: "month" },
        { name: "季度", key: "quarter" },
        { name: "年度", key: "year" },
      ],
      cycle: [
        { name: "全部", key: "" },
        { name: "日", key: "1" },
        { name: "周", key: "2" },
        { name: "月", key: "3" },
        { name: "季度", key: "4" },
        { name: "半年度", key: "5" },
        { name: "年度", key: "6" },
        // { name: "计数", key: "7" },
        // { name: "计时", key: "8" },
      ],
      columns: [
        {type: 'selection', align: 'center', width: 60},
        { title: "设备类别", key: "categoryName", minWidth: 100,align: "center" },
        { title: "检测位置", key: "positionName", minWidth: 100,align: "center" },
        { title: "检测分类", key: "classifyName", minWidth: 100,align: "center" },
        { title: "检测周期", key: "triggerCycleName", minWidth: 200,align: "center" },
        { title: "检测项目", key: "itemProject", minWidth: 150,align: "center",ellipsis: true },
        { title: "检测方法", key: "itemMethod", minWidth: 400,align: "center",ellipsis: true},
        { title: "单位", key: "unitName", minWidth: 100,align: "center" },
        { title: "上限", key: "maxValue", minWidth: 100,align: "center" },
        { title: "下限", key: "minValue", minWidth: 100,align: "center" },
        { title: "标准工时(s)", key: "itemHours", minWidth: 120,align: "center" },
        { title: "创建人", key: "createName", minWidth: 200,align: "center" },
        { title: "创建时间", key: "createTime", minWidth: 200,align: "center" },
        { title: "确认人", key: "verifyName", minWidth: 200,align: "center" },
        { title: "确认时间", key: "verifyTime", minWidth: 200,align: "center" },
        { title: `${ this.$t('common.operation') }`, slot: "action",fixed: 'right', minWidth: 200, align: "center" },
      ],
      otherColumns: [
        {type: 'selection', align: 'center', width: 60},
        { title: "设备类别", key: "categoryName", minWidth: 100,align: "center" },
        { title: "检测位置", key: "positionName", minWidth: 100,align: "center" },
        { title: "检测分类", key: "classifyName", minWidth: 100,align: "center" },
        { title: "检测周期", key: "triggerCycleName", minWidth: 200,align: "center" },
        { title: "检测项目", key: "itemProject", minWidth: 150,align: "center",ellipsis: true },
        { title: "检测方法", key: "itemMethod", minWidth: 400,align: "center",ellipsis: true},
        { title: "单位", key: "unitName", minWidth: 100,align: "center" },
        { title: "上限", key: "maxValue", minWidth: 100,align: "center" },
        { title: "下限", key: "minValue", minWidth: 100,align: "center" },
        { title: "标准工时(s)", key: "itemHours", minWidth: 120,align: "center" },
        { title: "创建人", key: "createName", minWidth: 200,align: "center" },
        { title: "创建时间", key: "createTime", minWidth: 200,align: "center" },
        // { title: "审核人", key: "verifyName", minWidth: 100,align: "center" },
        // { title: "审核时间", key: "verifyTime", minWidth: 150,align: "center" },
        { title: `${ this.$t('common.operation') }`, slot: "action",fixed: 'right', minWidth: 200, align: "center" },
      ],
      data: [],
    };
  },
  created() {
    this.searchList()
    this.getDeviceList()
  },
  mounted() {
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for(let item of itemList){
      if(item.code=="dcmAcctestItemAdd"){
        this.checkBtnPermission.dcmAcctestItemAdd = true
      }
      if(item.code=="dcmAcctestItemEdit"){
        this.checkBtnPermission.dcmAcctestItemEdit = true
      }
      if(item.code=="dcmAcctestItemDelete"){
        this.checkBtnPermission.dcmAcctestItemDelete = true
      }
      if(item.code=="dcmAcctestItemList"){
        this.checkBtnPermission.dcmAcctestItemList = true
      }
      if(item.code=="dcmAcctestItemVerifyById"){
        this.checkBtnPermission.dcmAcctestItemVerifyById = true
      }
      if(item.code=="dcmAcctestItemBatchVerify"){
        this.checkBtnPermission.dcmAcctestItemBatchVerify = true
      }
      if(item.code=="dcmAcctestItemBatchDelete"){
        this.checkBtnPermission.dcmAcctestItemBatchDelete = true
      }

    }
  },
  methods: {
    getDeviceList() {
      this.axios({
        method: 'get',
        url: '/dms/dmsCategory/getSelectList',
        params: {}
      }).then(res => {
        if(res.code === 200){
          this.category = res.data
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    tabsClick(name) {
      console.log(name);
      this.status = name
      this.delIds = ''
      this.pageNum = 1
      this.searchList()
      // if (name === 0) {
      //     this.$refs.productConfigComponent.searchBtn();
      // } else  if (name === 1){
      //     console.log(this.$$refs);
      //     this.$refs.boxConfigComponent.searchBtn();
      // }else{
      //     this.$refs.shfitconfigComponent.searchBtn();
      // }
    },
    createfaultCodeShowH() {
      this.$refs.addProjectModal.show('')
    },
    //确认
    confirm(row) {
      this.confirmId = row.id
      this.confirmFaultCodeShowF = true
    },
    deleteConfirmOk() {
      this.confirmLoading = true
      this.axios({
        method: 'post',
        url: '/dms/dcmAcctestItem/verifyById',
        data: {
          id: this.confirmId
        }
      }).then(res => {
        
        if(res.code === 200){
          this.searchList()
          this.$Message.success(({content:'确认成功！',duration:2,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.confirmLoading = false
        this.confirmFaultCodeShowF = false
      })
    },
    //批量确认
    handleBatchConfirm() {
      this.confirmBatchFaultCodeShowF = true
    },
    deleteBatchConfirmOk() {
      this.confirmBatchLoading = true
      this.axios({
        method: 'post',
        url: '/dms/dcmAcctestItem/batchVerify',
        data: {
          ids: this.delIds
        }
      }).then(res => {
        
        if(res.code === 200){
          this.searchList()
          this.$Message.success(({content:'批量确认成功！',duration:2,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.confirmBatchLoading = false
        this.confirmBatchFaultCodeShowF = false
      })
    },
    edit(row) {
      this.$refs.addProjectModal.show(row)
    },
    //删除
    deleteRow(row) {
      this.delId = row.id
      this.delFaultCodeShowF = true
    },
    deleteOk() {
      this.delLoading = true
      this.axios({
        method: 'delete',
        url: '/dms/dcmAcctestItem/delete',
        params: {
          id: this.delId
        }
      }).then(res => {
        
        if(res.code === 200){
          this.searchList()
          this.$Message.success(({content:'删除成功！',duration:2,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.delLoading = false
        this.delFaultCodeShowF = false
      })
    },
    //批量删除
    handleBatchDelete() {
      this.delBatchFaultCodeShowF = true
    },
    deleteBatchOk() {
      this.delBatchLoading = true
      this.axios({
        method: 'delete',
        url: '/dms/dcmAcctestItem/batchDelete',
        params: {
          ids: this.delIds.toString()
        }
      }).then(res => {
        
        if(res.code === 200){
          this.searchList()
          this.$Message.success(({content:'批量删除成功！',duration:2,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.delBatchLoading = false
        this.delBatchFaultCodeShowF = false
      })
    },
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item) => {
        myArray.push(item.id);
      });

      this.delIds = myArray;
      if (selection.length > 1) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    handleSearch() {
      // this.status = status
      this.searchList()
    },
    //分页
    changeNum(){
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val){
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        status: this.status,
        pageNo:this.pageNum,
        pageSize:this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestItem/list',
        params: params
      }).then(res => {
        
        if(res.code === 200){
          this.data = res.data.list
          this.total = res.data.total
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    batchImport() {
      this.importVisible = true;
    },
    exportProject() {},
    importOk() {},
    importCancel() {},
  },
}
</script>
<style lang="scss">
  .project {
    background: #ffffff;
    height: calc(100vh - 150px);
    .title {
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
      .icon {
        display: flex;
        .creatBtnright {
          display: flex;
          align-items: center;
          font-size: 16px;
          i {
            font-size: 36px;
          }
        }
      }
    }
    .tab {
      height: calc(100% - 100px);
      .ivu-tabs-bar {
        padding-left: 30px;
      }
      .ivu-tabs-tab {
        font-size: 18px;
      }
    }
  }
  .addModal {

  }
  .batchImport {
    .import {
      display: flex;
      align-items: center;
      .selectFile {
        margin-right: 10px;
      }
      .selectFile::before {
        content: "*";
        color: red;
        padding-right: 5px;
      }
    }
    .download {
      .clickthis {
        color: #187bdb;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
</style>
